<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.g-index-total{ display: flex; display: -webkit-flex;	}
	.g-index-total li{ 
		flex: 1; 
		height: 100px; 
		margin-right: 10px;
		color: #fff;
		text-align: center;
		position: relative;
		color: #7a7a7a;
		border:1px solid #aaa;
		border-radius: 5px;
	}
	.g-index-total p{	font-size: 16px; line-height: 32px;	}
	.g-index-total span{ display: inline-block;	margin-top: 20px;	font-size: 32px; }
	.m-total-left{ margin-right: 100px;	}
	.m-total-right{ position: absolute; right: 10px; top: 10px;}

	@media screen and (max-width: 1360px){

		.m-total-left{ margin-right: 60px;}
		.m-total-right{ top: 20px; }
		.m-total-right img{ width: 60px; }
	}
</style>
<{/block}>


<{block name=content}>
<section>
	<ul class="g-index-total">
		<li>
			<div class="m-total-left">
				<span class="sysNum">132</span>
				<p>系统数量</p>
			</div>
			<div class="m-total-right">
				<img src="/img/sys_num.png">
			</div>
		</li>
		<li>
			<div class="m-total-left">
				<span class="colName">22</span>
				<p>集合数</p>
			</div>
			<div class="m-total-right">
				<img src="/img/col_num.png">
			</div>
		</li>
		<li>
			<div class="m-total-left">
				<span class="dataNum">22222222</span>
				<p>数据总量</p>
			</div>
			<div class="m-total-right">
				<img src="/img/data_num.png">
			</div>
		</li>
		<li>
			<div class="m-total-left">
				<span class="successNum">45</span>
				<p>成功接口数</p>
			</div>
			<div class="m-total-right">
				<img src="/img/suc_num.png">
			</div>
		</li>
		<li>
			<div class="m-total-left">
				<span class="faileNum">21</span>
				<p>失败接口数</p>
			</div>
			<div class="m-total-right">
				<img src="/img/de_num.png">
			</div>
		</li>
	</ul>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">
	function loadIndexTotal(){
		ajaxObj('/welcome/getSystemStatus', 'post', '', function(data){
			$('.sysNum').html(data.sysNum);
			$('.colName').html(data.colNum);
			$('.dataNum').html(data.dataNum);
			$('.successNum').html(data.successNum);
			$('.faileNum').html(data.failedNum);
		}, errorFn)
	}
	loadIndexTotal();
</script>
<{/block}>